Mermaid 渲染示例
// 示例代码
const examples = {
flow: `graph TD
A[开始] --> B{是否有问题?}
B -->|是| C[解决问题]
B -->|否| D[完成]
C --> D`,
sequence: `sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
系统->>系统: 验证凭据
系统-->>用户: 登录成功
用户->>系统: 执行操作
系统-->>用户: 返回结果`,
gantt: `gantt
title 项目计划
dateFormat YYYY-MM-DD
section 计划阶段
需求分析 :a1, 2023-01-01, 7d
设计 :a2, after a1, 5d
section 实施阶段
开发 :a3, after a2, 10d
测试 :a4, after a3, 5d
部署 :a5, after a4, 2d`,
class: `classDiagram
class Animal {
+name: string
+age: int
+makeSound(): void
}
class Dog {
+breed: string
+fetch(): void
}
class Cat {
+climbTree(): void
}
Animal <|-- Dog
Animal <|-- Cat`,
state: `stateDiagram-v2
[*] --> 待处理
待处理 --> 处理中: 开始处理
处理中 --> 已完成: 完成
处理中 --> 已取消: 取消
已完成 --> [*]
已取消 --> [*]`
};
// DOM 元素
const mermaidCodeEl = document.getElementById('mermaidCode');
const renderBtn = document.getElementById('renderBtn');
const clearBtn = document.getElementById('clearBtn');
const previewBtn = document.getElementById('previewBtn');
const outputEl = document.getElementById('output');
const statusEl = document.getElementById('status');
const exampleBtns = document.querySelectorAll('.example-btn');
const previewContainerEl = document.getElementById('preview-container');
const previewEl = document.getElementById('preview');
// 加载示例
exampleBtns.forEach(btn => {
btn.addEventListener('click', () => {
const exampleType = btn.getAttribute('data-example');
mermaidCodeEl.value = examples[exampleType];
previewContainerEl.style.display = 'none';
});
});
// 渲染 Mermaid 代码
renderBtn.addEventListener('click', async () => {
const mermaidCode = mermaidCodeEl.value.trim();
if (!mermaidCode) {
showStatus('请输入 Mermaid 代码', 'error');
return;
}
// 获取选择的格式
const format = document.querySelector('input[name="format"]:checked').value;
try {
showStatus('正在渲染...', 'loading');
outputEl.innerHTML = '渲染中，请稍候...
';
const response = await fetch('/api/mermaid/render', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
mermaidCode,
format
})
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || '渲染失败');
}
if (format === 'svg') {
const svgContent = await response.text();
outputEl.innerHTML = svgContent;
} else if (format === 'png') {
const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);
outputEl.innerHTML = `
`;
}
showStatus('渲染成功', 'success');
} catch (error) {
outputEl.innerHTML = '';
showStatus(`错误: ${error.message}`, 'error');
}
});
// 本地预览功能
previewBtn.addEventListener('click', () => {
const mermaidCode = mermaidCodeEl.value.trim();
if (!mermaidCode) {
showStatus('请输入 Mermaid 代码', 'error');
return;
}
try {
// 清除预览区域
previewEl.innerHTML = mermaidCode;
previewContainerEl.style.display = 'block';
// 本地渲染
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
showStatus('本地预览成功', 'success');
} catch (error) {
previewEl.innerHTML = `预览失败: ${error.message}
`;
showStatus(`预览错误: ${error.message}`, 'error');
}
});
// 清除输入和输出
clearBtn.addEventListener('click', () => {
mermaidCodeEl.value = '';
outputEl.innerHTML = '';
statusEl.innerHTML = '';
previewContainerEl.style.display = 'none';
});
// 显示状态信息
function showStatus(message, type) {
statusEl.textContent = message;
statusEl.className = 'status ' + type;
}